<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="closed_details_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">产品详情<i class="el-icon-close"></i></div>
    </div>
    <div class="closed_details_title">
      <div class="closed_details_title_left">产品包列表/<i>产品包详情</i></div>
      <div class="closed_details_title_right">
        <button class="closed_details_title_right_btn"
                @click="handerBase">
          返回
        </button>
      </div>
    </div>
    <div class="container-box">
      <div>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="1">产品包信息</el-menu-item>
          <el-menu-item index="2">应用场景详情</el-menu-item>
          <el-menu-item index="3">产品包商品</el-menu-item>
        </el-menu>
      </div>
      <div class="product-detail"
           v-show="current == 1">
        <el-form ref="form"
                 :model="form"
                 label-position="left">
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="名称"
                            label-width="50px">
                <el-input type="text"
                          v-model="productList.name"></el-input>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="价格"
                            label-width="50px">
                <el-input type="text"
                          v-model="productList.area_price"></el-input>
                <span class="money">元/m²</span>
              </el-form-item>
            </div>
          </div>

          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="标签"
                            label-width="50px">
                <el-input type="text"
                          v-model="productList.title"
                          class="tag"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="面积"
                            label-width="50px">
                <el-input type="text"
                          v-model="form.area_scope"
                          placeholder="请输入面积范围，例如：100-120"></el-input><span class="money">m²</span>
                <el-input type="text"
                          v-model="form.price"
                          placeholder="请输入价格"
                          class="price"></el-input>
                <span class="money">元</span>
              </el-form-item>
            </div>
            <el-button type="primary"
                       class="add-btn"
                       @click="addData">添加</el-button>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label=""
                            label-width="50px">
                <div class="add-items">
                  <div v-for="(item, index) in productList.sku_lst"
                       :key="index"
                       class="add-item">
                    <div>
                      {{ item.area_scope + "m²"}} ;
                      {{ item.price }}元
                    </div>
                    <i class="el-icon-error"
                       @click="handleDel(index)"></i>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="封面图片"
                            label-width="80px">
                <img :src="productList.lead_img"
                     alt=""
                     class="cover" />
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="原价"
                            label-width="50px">
                <el-input type="text"
                          v-model="productList.price"
                          class="tag"></el-input><span class="money">元</span>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="是否推荐"
                            label-width="80px">
                <el-radio v-model="recommend"
                          label="1">是</el-radio>
                <el-radio v-model="recommend"
                          label="2">否</el-radio>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
      <div class="application-scenarios"
           v-show="current == 2">
        <el-form ref="form"
                 :model="form"
                 label-position="left">
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="标题"
                            label-width="50px">
                <el-input type="text"
                          v-model="sceneList.title"></el-input>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="报价"
                            label-width="50px">
                <el-input type="text"
                          v-model="sceneList.offer"></el-input>
                <span class="money">元</span>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel">
            <div class="tel-input">
              <el-form-item label="面积"
                            label-width="50px">
                <el-input type="text"
                          v-model="sceneList.area"></el-input>
                <span class="money">m²</span>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="风格"
                            label-width="50px">
                <el-select v-model="houseTypeList"
                           @change="handlehouseType"
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in houseTypeTagList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div class="tel-input">
            <el-form-item label="户型"
                          label-width="50px">
              <el-input type="text"
                        v-model="sceneList.house_name"></el-input>
            </el-form-item>
          </div>
          <div class="tel-input">
            <el-form-item label="图纸"
                          label-width="50px">
              <div class="picture-card">
                <div v-if="sceneList.thumb_url">
                  <img v-for="(item, index) in sceneList.thumb_url"
                       :key="index"
                       :src="item.image_path"
                       class="avatar"
                       @click="handleDraw" />
                </div>

                <el-upload class="avatar-uploader"
                           action="/api/admin/base/uploadfile"
                           list-type="picture-card"
                           :on-preview="handlePictureCardPreview"
                           :on-success="handleImageSuccess"
                           :before-upload="beforeImageUpload"
                           :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </div>

              <el-dialog :visible.sync="dialogVisible">
                <img width="100%"
                     :src="dialogImageUrl"
                     alt="" />
              </el-dialog>
            </el-form-item>
          </div>
          <div style="width: 900px; height: 300px">
            <el-form-item label="详情"
                          label-width="50px">
              <!--上传图片时得加载画面-->
              <VueEditor style="width: 100%"
                         v-loading="editorLoading"
                         element-loading-text="图片上传中"
                         element-loading-background="rgba(0, 0, 0, 0.5)"
                         useCustomImageHandler
                         @image-added="handleImageAdded"
                         :editorToolbar="customToolbar"
                         v-model="sceneList.content" />
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div class="product-goods"
           v-show="current == 3">
        <el-button type="primary"
                   @click="handleAddProduct">添加商品</el-button>
        <div class="seach"
             v-if="searchShow">
          <el-input v-model="search"
                    placeholder="请输入商品信息查询"></el-input>
          <button class="button"
                  @click="getProductMatch">
            <i class="el-icon-search"></i>搜索
          </button>
        </div>
        <div class="border-bt">
          <div class="goods-list"
               v-for="(item, index) in goodsList"
               :key="index">
            <el-radio v-model="radio2"
                      :label="index"
                      @change="handleProduct">
              <img :src="item.main_imgurl"
                   alt=""
                   class="logo-img" />
              <span class="content">{{ item.product_title }}</span>
            </el-radio>
          </div>
          <div class="product-btn"
               v-if="goodsList.length > 0">
            <el-button>取消</el-button>
            <el-button type="primary"
                       @click="handleProductSure">确定</el-button>
          </div>
        </div>
        <div class="down-menu"
             v-if="pitchProductList.length">
          <div v-for="(item, index) in pitchProductList"
               :key="index">
            <h6 @click="handleContentShow(index)">
              <i class="el-icon-arrow-down"></i>{{ item.cate_name }}
            </h6>
            <div v-if="item.isShow">
              <div class="menu-bg">
                <div class="menu-line">
                  <div class="menu-content">
                    <div>1、{{ item.product_title }}</div>
                    <div>
                      <!-- <el-button @click="handleProductAdd(index, item)">添加替换商品</el-button> -->
                      <i @click="handleProductDel(index)"
                         class="el-icon-delete-solid"></i>
                    </div>
                  </div>
                  <p>品牌：{{ item.store_name }}</p>
                  <div class="menu-type">
                    <span>可选规格
                      <i @click="handleSelectable(item, index)"
                         class="el-icon-circle-plus-outline"></i></span>
                    <div v-if="item.selectData.length"
                         style="display:flex;">
                      <span class="specification"
                            v-for="(data, keys) in item.selectData"
                            :key="keys">
                        <span v-for="(child, ind) in data"
                              :key="ind">
                          <span v-for="(pre, i) in child"
                                :key="i">{{ pre.specif }}</span>
                                {{ child.num }}件
                        </span>
                        <i class="el-icon-error"
                           @click="deleteGuige1(keys,index)"></i>
                      </span>
                    </div>
                  </div>
                  <div class="menu-type default">
                    <span>默认规格：
                      <!-- <i @click="handleDefault(item,index)"
                         class="el-icon-edit"></i> -->
                    </span>
                    <div v-if="item.selectData.length" class="df-specification">
                      <span class="specification" v-for="(imt, iet) in item.selectData[0]" :key="iet">
                       <span v-for="(v, i) in imt"
                              :key="i">
                        {{ v.specif }}                            
                        </span>
                        {{ imt.num }}件
                      </span>
                    </div>
                    <div v-else class="df-specification">
                      请添加规格
                    </div>
                  </div>
                </div>
              </div>
              <div class="menu-bg">
                <div class="menu-line"
                     v-for="(data, keys) in item.productSecondList"
                     :key="keys">
                  <div class="menu-content">
                    <div>({{ keys + 1 }}){{ data.product_title }}</div>
                    <div @click="handleDelItem(index, keys)">
                      <i class="el-icon-delete-solid"></i>
                    </div>
                  </div>
                  <p>品牌：{{ data.store_name }}</p>
                  <div class="menu-type">
                    <span>可选规格
                      <i @click="handleSelectable(data, index, keys)"
                         class="el-icon-circle-plus-outline"></i></span>
                    <div v-if="data.selectData.length"
                         style="display:flex;">
                      <span class="specification"
                            v-for="(data1, index1) in data.selectData"
                            :key="index1">
                        <span v-for="(child, ind) in data1"
                              :key="ind">
                          <span v-for="(pre, i) in child"
                                :key="i">{{ pre.specif }}</span>{{ child.num }}
                        </span>
                        <i class="el-icon-error"
                           @click="deleteGuige(index,keys,index1)"></i></span>
                    </div>

                  </div>
                  <div class="menu-type default">
                    <span>默认规格：
                      <!-- <i @click="handleDefault(data, index, keys)"
                         class="el-icon-edit"></i> -->
                    </span>
                     <div v-if="data.selectData.length" class="df-specification">
                      <span class="specification" v-for="(imt, iet) in data.selectData[0]" :key="iet">
                       <span v-for="(v, i) in imt"
                              :key="i">
                        {{ v.specif }}                            
                        </span>
                        {{ imt.num }}件
                      </span>
                    </div>
                    <div v-else class="df-specification">
                      请添加规格
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="df-c primary-btn"
         v-show="current == 3">
      <el-button type="primary"
                 class=""
                 @click="handleNewAdd">立即保存</el-button>
    </div>
    <el-dialog title="添加商品可选规格"
               :visible.sync="dialogFormVisible">
      <div class="product-specification">
        <div v-for="(item, index) in parameter"
             :key="index">
          <div>
            <div class="product-color">可选{{ item.specifs }}：</div>
            <el-button class="specification"
                       @click="selectSpecifs(keys, index)"
                       :class="data.selected ? 'active' : ''"
                       v-for="(data, keys) in item.child"
                       :key="keys">{{ data.specif }}</el-button>
          </div>
        </div>

        <div>
          <div class="mt">数量：</div>
          <span class="minus"
                @click="handleMinus">-</span>
          <input type="text"
                 class="num active"
                 v-model="num" />
          <span class="add"
                @click="handleAdd">+</span>
        </div>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleDialogSure">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <el-dialog title="选择默认显示规格"
               :visible.sync="dialogFormVisible2">     
      <div class="product-specification">
        <div v-for="(item, index) in parameter2"
             :key="index">
           <div>
            <div class="product-color">可选{{ item.specifs }}：</div>
            <el-button class="specification"
                       @click="selectSpecifs2(keys, index)"
                       :class="data.selected ? 'active' : ''"
                       v-for="(data, keys) in item.child"
                       :key="keys">{{ data.specif }}</el-button>
          </div>
        </div>
         <div>
          <div class="mt">数量：</div>
          <span class="minus"
                @click="handleMinus">-</span>
          <input type="text"
                 class="num active"
                 v-model="num" />
          <span class="add"
                @click="handleAdd">+</span>
        </div>
      </div>

      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleDialogSure2">确 定</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { VueEditor } from 'vue2-editor'
export default {
  components: { VueEditor },
  name: 'Vue2Editor',
  data() {
    return {
      activeIndex: '1',
      current: 1,
      editorLoading: false, //富文本图片loading
      customToolbar: [
        [{ header: [false, 1, 2, 3, 4, 5, 6] }], //标题
        ['bold', 'italic', 'underline'], //加粗\斜体\下划线
        ['italic'], //斜体----也可以拆开来写，用于换位置顺序
        [{ align: '' }, { align: 'center' }, { align: 'right' }], //对齐
        [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }], //有序无序列表
        [{ background: [] }, { color: [] }], //背景色
        ['image', 'link'], //图片、链接
        ['strike'], //作废（文字中间一横）
        ['underline'],
        ['clean'], //清楚格式（所谓去掉背景色这些花里胡巧）
        ['code'], //代码
        ['code-block'], //代码块
        //['video'] //视频
      ],
      content: '',
      form: {
        area_scope: '',
        price: '',
      },
      recommend: '', //是否推荐
      dialogImageUrl: '',
      dialogVisible: false,
      list: [],
      jsonList:'',
      search: '苹果', //商品匹配
      radio2: '',
      goodsList: [], //关联商品
      searchShow: false,
      productId: null,
      id: null,
      productList: {}, //产品包信息
      sceneList: {}, //应用场景
      diyList: {}, //产品包商品
      houseTypeList: '', //户型选中
      houseTypeTagList: [], //户型标签
      houseTypeId: null,
      dialogFormVisible: false, //规格弹框
      dialogFormVisible2: false, //默认规格弹框
      num: 1, //规格数量
      productShow: false, //添加商品
      productShowItem: null, //添加规格
      productContentShow: null,
      pitchProductList: [], //选中商品数据
      // pitchProductSecond: [],//次级商品数据,
      parameter: [],//可选
      parameter2: [],//默认
      selectData: [],
      selectIndex: undefined,
      selectKeys: undefined,
      defaultList:[],//默认规格的数据
      thumb_url_id:'',//轮播图id
      img_id:[],//轮播图id数组
      imgId:'',//轮播图列表
      commodityId:null,//选中商品id
      selectDataList:{},//选中的数据
      productData:{},//规格总数据
      sku_id:'',
      sku_price:'',
      sku_primary_price:'',
      sku_num:'',

    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.getProductList()
    this.getHouseTypeList()
  },
  computed: {
    /**
     * 获取可选规格
     */
    selectParameter() {
      let arr = []
      this.parameter.forEach((data) => {
        data.child.forEach((item) => {
          let newObj = {}

          if (item.selected) {
            if (!newObj.specif && newObj.specif !== item.specif) {
              newObj = item
              arr.push(item)
            }
          }
        })
      })
      return { arr: arr }
    },
    //默认规格
    // selectParameter2() {
    //   let arr = []
    //   this.parameter2.forEach((data) => {
    //     data.child.forEach((item) => {
    //       let newObj = {}

    //       if (item.selected) {
    //         if (!newObj.specif && newObj.specif !== item.specif) {
    //           newObj = item
    //           arr.push(item)
    //         }
    //       }
    //     })
    //   })
    //   return { arr: arr }
    // },
  },
  methods: {
    //立即添加
    handleNewAdd(){
      let product_list = [
        {
            product_data:{
              product_id:this.commodityId,//商品id
              sku_data:[
                {
                  sku_id:this.sku_id,//商品sku信息sku_id
                  num:this.sku_num,//商品sku信息数量
                  checked:1,//是否选中1或0
                }
              ],
            },
            replace_product_data:[
              // {
              //   product_id:298,
              //   sku_data:[
              //     {
              //       sku_id:2143,//商品sku信息sku_id
              //       num:this.sku_num,//商品sku信息数量
              //       checked:0,//是否选中1或0
              //     }
              //   ],
              // },
            ],//对应可替换商品
          }
      ]
      let productJsonList = JSON.stringify(product_list)
      console.log(productJsonList,"json数据");
      let params = {
        name:this.productList.name,//产品包名称
        area_price:this.productList.price,//每平方米价格
        title:this.productList.title,//产品包标签
        lead_img:this.productList.lead_img_id,//展示图
        is_push:this.productList.is_push,//是否推荐1是 0否
        sku_lst:this.jsonList,//产品包sku
        // area_scope:this.form.area,//面积
        // price:this.form.price,//原价
        scene_title:this.sceneList.title,//应用场景名称
        offer:+this.sceneList.offer,//报价
        area:this.sceneList.area,//面积
        style_id:this.houseTypeList,//设计风格 传id
        house_name:this.sceneList.house_name,//户型名称
        content:this.sceneList.content,//应用场景介绍
        thumb_url:this.imgId,//应用场景轮播图多个1,2
        product_lst:productJsonList,                      
      }
      this.$http.post('/api/root/ProductPack/add',params).then((res) => {
        // console.log(res,"tianjia-----66");
        if(res.code == 1){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
         this.$router.go(-1)
        }
      })
    },
    /**
     * 删除二级列表里面的规格
     */
    deleteGuige(index, keys, index1) {
      console.log(index1, index)
      this.pitchProductList[index].productSecondList[keys].selectData.splice(
        index1,
        1
      )
    },
    /**
     * 删除二级列表里面第一个商品的规格
     */
    deleteGuige1(keys, index) {
      console.log(keys, index)
      this.pitchProductList[index].selectData.splice(keys, 1)
    },
    //获取选中的标签
    handlehouseType(e) {
      console.log(e, '选中的标签-----')
      this.houseTypeList = e
    },
    //获取户型标签
    getHouseTypeList() {
      this.$http.post('/api/root/ProductPack/getStyle').then((res) => {
        // console.log(this.houseTypeId, 'fenggebiaoqian---')

        this.houseTypeTagList = res.data.design_style
        const result = this.houseTypeTagList.filter(
          (item) => item.id == this.houseTypeId
        )
        if(result.length){
          this.houseTypeList = result[0].name
        }       
        console.log(result,989898);
      })
    },
    // 删除一级商品
    handleProductDel(index) {
      this.pitchProductList.splice(index, 1)
    },
    //添加商品
    handleAddProduct() {
      this.searchShow = true
    },
    /**
     * 选择可选规格
     */
    selectSpecifs(keys, index) {
      for (let i = 0; i < this.parameter[index].child.length; i++) {
        if (keys == i) {
          this.parameter[index].child[i].selected = true
        } else {
          this.parameter[index].child[i].selected = false
        }
      }
    },
    //选择默认规格
    // selectSpecifs2(keys, index) {
    //   for (let i = 0; i < this.parameter2[index].child.length; i++) {
    //     if (keys == i) {
    //       this.parameter2[index].child[i].selected = true
    //     } else {
    //       this.parameter2[index].child[i].selected = false
    //     }
    //   }
    // },
    //商品匹配
    getProductMatch() {
      let params = {
        keyword: this.search,
      }
      this.$http.post('/api/root/ProductPack/product', params).then((res) => {
        console.log(res, 'shangp-------')
        this.goodsList = res.data
      })
    },
    //选择商品id
    handleProduct(e) {
      console.log(e, '商品id')
      this.productId = e
    },
    handleProductSure() {
      this.productShow = true
      // let productArr = []
      let obj = {
        ...this.goodsList[this.productId],
        isShow: true,
        productSecondList: [],
        selectData: [],
      }
      console.log(obj, 'obj')
      this.commodityId = obj.product_id
      this.pitchProductList.push(obj)
      console.log(this.pitchProductList, '商品数组---------')
    },
    //添加二级菜单
    handleProductAdd(index, item) {
      // this.productShowItem = index
      let obj = Object.assign({}, item)
      obj.selectData = []
      this.pitchProductList[index].productSecondList.push(obj)
    },
    //删除二级菜单
    handleDelItem(index, keys) {
      console.log(keys, index)
      this.pitchProductList[index].productSecondList.splice(keys, 1)
    },
    handleContentShow(index) {
      this.pitchProductList[index].isShow = !this.pitchProductList[index].isShow
      // this.pitchProductSecond = []
    },
    //可选规格确定
    handleDialogSure() {
      this.dialogFormVisible = false
      let { selectIndex, selectKeys } = this
      // console.log(this.selectParameter)
      // return;
      Object.values(this.selectParameter).forEach((data, index) => {
        data.num = this.num
      })
      if (selectIndex !== undefined && selectKeys === undefined) {
        this.pitchProductList[selectIndex].selectData = this.pitchProductList[
          selectIndex
        ].selectData.concat(this.selectParameter)
      }
      if (selectIndex !== undefined && selectKeys !== undefined) {
        this.pitchProductList[selectIndex].productSecondList[
          selectKeys
        ].selectData = this.pitchProductList[selectIndex].productSecondList[
          selectKeys
        ].selectData.concat(this.selectParameter)
      }
      // this.parameter = this.selectParameter
      // this.selectDataList = this.pitchProductList[selectIndex]
      // console.log(this.pitchProductList[selectIndex],"moren规格的数据");
      // console.log(this.productData,"9898989");
      // console.log(this.parameter,"88888");
      this.get_keys()
      // console.log(
      //   selectIndex,
      //   selectKeys,
      //   'this.selectParameter',
      //   this.selectParameter,
      //   this.pitchProductList[selectIndex]
      // )
    },
    get_keys(){
      // console.log();
			let keys = [];
			this.productData.parameter.map((item1,index1)=>{
        // console.log(item1,"meiyixiang");
				let checkedItem = item1.child.find(r=>r.selected)
        // console.log(checkedItem,"checkedItem");
				if(checkedItem){
					keys.push({
						key:item1.specifs,
						value:checkedItem.specif
					})
				}
        
			})
      console.log(keys,44444);
			this.keys = keys
			let sku_lst = this.productData.sku_lst
			for(let i = 0;i<sku_lst.length; i++){
					if(JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)){
						// console.log(sku_lst)
						this.sku_id= sku_lst[i].sku_id
						this.price = sku_lst[i].price
						this.sku_primary_price = sku_lst[i].primary_price
						this.sku_num = sku_lst[i].num
            console.log(this.sku_id,this.price,this.sku_primary_price,this.sku_num,66)
					}
			}	
		},
    //默认规格确定
    // handleDialogSure2(){
    //    this.dialogFormVisible2 = false
    //    let { selectIndex, selectKeys } = this
    //   // console.log(this.selectParameter)
    //   // return;
    //   Object.values(this.selectParameter2).forEach((data, index) => {
    //     data.num = this.num
    //   })
    //   if (selectIndex !== undefined && selectKeys === undefined) {
    //     this.pitchProductList[selectIndex].selectData = this.pitchProductList[
    //       selectIndex
    //     ].selectData.concat(this.selectParameter2)
    //   }
    //   if (selectIndex !== undefined && selectKeys !== undefined) {
    //     this.pitchProductList[selectIndex].productSecondList[
    //       selectKeys
    //     ].selectData = this.pitchProductList[selectIndex].productSecondList[
    //       selectKeys
    //     ].selectData.concat(this.selectParameter2)
    //   }
    //   // this.parameter2 = this.selectParameter2
    //   // console.log(this.parameter2,"moren规格的数据");
    //    console.log(
    //     selectIndex,
    //     selectKeys,
    //     'this.selectParameter',
    //     this.parameter2,
    //     this.pitchProductList[selectIndex]
    //   )
    // },
    //可选规格
    handleSelectable(item, index, keys) {
      this.selectIndex = index
      this.selectKeys = keys
      let { product_id } = item
      let params = {
        product_id,
      }
      this.$http
        .post('/api/root/ProductPack/productDetail', params)
        .then((res) => {
          console.log(res,"规格")
          this.productData = res.data
          let list = res.data.parameter
          list.forEach((data) => {
            data.child.forEach((item) => {
              item.selected = false
            })
          })
          this.parameter = list
          this.dialogFormVisible = true
        })
      // console.log("item", item, "index", index, "keys", keys)
    },
    //默认规格
    // handleDefault(item,index,keys) {
    //   console.log("item", item, "index", index)
    //   this.dialogFormVisible2 = true
    //    this.selectIndex = index
    //     this.selectKeys = keys
    //     let { product_id } = item
    //     let params = {
    //       product_id,
    //     }
    //     this.$http
    //       .post('/api/root/ProductPack/productDetail', params)
    //       .then((res) => {
            
    //         let list = res.data.parameter
    //         list.forEach((data) => {
    //           data.child.forEach((item) => {
    //             item.selected = false
    //           })
    //         })
    //         this.parameter2 = list
    //         console.log(this.parameter2,"默认规格数据")
            
    //       })
    // },
    //规格数量操作
    handleMinus() {
      if (this.num == 1) {
        return
      } else {
        this.num = this.num - 1
      }
    },
    handleAdd() {
      this.num += 1
    },
    /**
     * 添加
     */
    addData() {
      let { area_scope, price } = this.form
      let newArea = area_scope.split('-')
      // console.log(area_scope,7878);
      console.log(newArea[0], newArea[1])
      if (newArea[0] > newArea[1])
        return this.$message({
          message: '面积格式有误',
          type: 'warning',
        })
      let data = {
        area_scope: area_scope,
        price,
      }
      if (!area_scope) return
      if (!price) return
      this.productList.sku_lst.push(data)
      // this.jsonList = JSON.stringify(this.list)
      this.jsonList = JSON.stringify(this.productList.sku_lst)
      console.log(this.jsonList,66668);
      this.form.area_scope = ''
      this.form.price = ''
    },
    handleDel(index) {
      this.list.splice(index, 1)
    },
    handleDraw() {
      this.dialogImageUrl = this.sceneList.thumb_url[0].image_path
      this.dialogVisible = true
    },
    handlePictureCardPreview(file) {
      //  console.log(file,6666);
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleImageSuccess(res, file) {
      console.log('图片上传1',file.response);
      let logoData = file.response.data
      this.dialogImageUrl = logoData.url
      // let img_id = []
      this.img_id.push(logoData.id)
      console.log(this.img_id,"id----------");
      if(this.sceneList.thumb_url.length){
        this.imgId = this.img_id.join(",")
        this.imgId =`${this.thumb_url_id},` + this.imgId
        console.log(this.imgId);
      }else{
        this.imgId = this.img_id.join(",")
      }
      
      // console.log(this.imgId);
      // this.logo_id = logoData.id
    },
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    //tap栏切换
    handleSelect(key, keyPath) {
      this.current = key
      // console.log(this.current,7777);
      // if (this.current == 2) {
      //   this.getHouseTypeList()
      // }
    },
    //获取产品包详情
    getProductList() {
      let params = {
        id: this.id,
      }
      this.$http.post('/api/root/ProductPack/detail', params).then((res) => {
        // console.log(res, "详情数据");
        if (res.code == 1) {
          this.productList = res.data.product_pack
          this.sceneList = res.data.product_pack_scene
          this.diyList = res.data.product_pack_diy_list
          this.houseTypeId = this.sceneList.style_id
          if (this.productList.is_push == 1) {
            this.recommend = '1'
          } else {
            this.recommend = '2'
          }
          if(this.sceneList.thumb_url.length){
              this.sceneList.thumb_url.forEach(item=>{
                this.thumb_url_id = item.img_id
                // console.log(thumb_url_id,"轮播图id");
              })
              console.log(this.thumb_url_id,"轮播图id");
          }
        }
      })
    },
    handerBase() {
      this.$router.go(-1)
    },
    //富文本上传图片
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData()
      let isLtSize = file.size / 1024 / 1024 < 10
      if (!isLtSize) {
        this.$message.warning('上传文件不能超过 10MB!')
        return
      }
      this.editorLoading = true
      formData.append('file', file)
      this.$api
        .uploadfile(formData)
        .then((result) => {
          // 你上传路径返回的url
          let url = result.data.url
          Editor.insertEmbed(cursorLocation, 'image', url)
          resetUploader()
          this.editorLoading = false
        })
        .catch((err) => {
          console.log(err)
          this.editorLoading = false
        })
    },
  },
}
</script>

<style scoped lang="less">
.index[data-v-826af616] .is-active {
  background: #fff !important;
}
.el-input {
  width: 300px;
}
.container {
  //头部
  .closed_details_top {
    width: 100%;
    height: 40px;
    padding: 0px 20px;
    display: flex;
    align-items: center;

    .into_index {
      width: 100px;
      height: 28px;
      text-align: center;
      line-height: 28px;
      color: #101010;
      font-size: 14px;
      border: 1px solid #bbbbbb;
      position: relative;
      border-radius: 4px;
      cursor: pointer;

      i {
        top: 7px;
      }
    }

    i {
      position: absolute;
      right: 4px;
      top: 8px;
    }
    .current {
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: #409eff 10000%;
      border: 1px solid #fff;
      position: relative;
      font-size: 14px;
      color: #fff;
      margin-left: 10px;
      border-radius: 4px;
      cursor: pointer;

      &::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 6px;
        top: 10px;
      }
    }
  }
  .closed_details_title {
    width: 100%;
    height: 90px;
    background: #f5f5f5;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &_left {
      color: #101010;
      font-size: 14px;

      i {
        color: #5692fa;
        font-style: normal;
      }
    }

    &_right {
      &_btn {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 4px;
        outline: none;
        border: 0 none;
        background: #27b148;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .title-receiving {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    .detail {
      color: #409eff;
    }
  }
  .product-detail {
    padding: 20px;
    .form-tel {
      display: flex;
      .tel-input {
        // margin-right: 100px;
        display: flex;
        align-items: center;
        .tag {
          width: 750px;
        }
        .price {
          margin-left: 20px;
        }
        .el-icon-error {
          font-size: 20px;
          margin-left: 5px;
        }
        .money {
          margin-left: 10px;
        }
        .cover {
          width: 250px;
          height: 150px;
        }
        .add-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid #c0c4cc;
          padding: 0 5px;
          margin-right: 10px;
          margin-bottom: 10px;
          width: 200px;
          i {
            cursor: pointer;
          }
        }
      }
      .add-items {
        display: flex;
        align-items: center;
        width: 800px;
        flex-wrap: wrap;
      }
      .add-btn {
        width: 80px;
        height: 40px;
        padding: 5px 0;
        margin-left: 26px;
      }
      .service {
        display: flex;
        align-items: center;
        margin-left: 100px;
        .money {
          margin-left: 10px;
        }
      }
    }
  }
  .application-scenarios {
    padding: 20px;
    .form-tel {
      display: flex;
    }
    .service {
      // display: flex;
      // align-items: center;
      margin-left: 100px;
      .money {
        margin-left: 10px;
      }
    }
    //图片上传样式
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .picture-card {
      display: flex;
    }
    .avatar {
      width: 148px;
      height: 148px;
      display: block;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }
  .editor .ql-editor {
    min-height: 300px;
    max-height: 300px;
    font-size: 14px;
  }
  .product-goods {
    padding: 20px;
    .seach {
      width: 50%;
      margin: 20px 0;
      display: flex;
      .button {
        width: 100px !important;
        background: #409dfb;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        border: 0 none;
        outline: none;
        border-radius: 4px;
        color: #fff;

        i {
          margin-right: 5px;
        }
      }
    }
    .border-bt {
      padding-bottom: 30px;
      border-bottom: 1px solid #ccc;
      // width: 70%;
    }
    .goods-list {
      width: 600px;
      border: 1px solid #e0e0e0;
      padding: 5px;

      .logo-img {
        width: 40px;
        height: 40px;
      }
      .content {
        width: 500px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 10px;
      }
    }
    .product-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 65%;
      margin-top: 15px;
    }

    .down-menu {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid #ccc;
      background: #f8f9f8;
      width: 60%;
      i {
        cursor: pointer;
      }
      h6 {
        cursor: pointer;
        margin-bottom: 10px;
      }
      .menu-type {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        // width: 41%;
        margin-bottom: 10px;
        .df-specification{
          margin-left: 5px;
        }
        .specification {
          padding: 2px 4px;
          background: #f4f5f4;
          margin-left: 10px;
          .el-icon-error {
            margin-left: 5px;
          }
        }
      }
      // .default {
      //   width: 23%;
      // }
      .menu-bg {
        background: #fff;
        padding: 20px;
        .menu-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          .el-button {
            padding: 3px 8px;
            margin-right: 5px;
            // height: 20px;
          }
        }
        p {
          margin-bottom: 10px;
        }
        .menu-line {
          border-bottom: 1px solid #e1e1e1;
        }
      }
    }
  }
  .specification {
    // padding: 5px 20px;
    background: #f7f8f7;
    margin-right: 20px;
    // border: none;
  }
  .active {
    border: 1px solid #66b1ff;
    color: #66b1ff;
  }
  .product-specification {
    .product-color {
      margin-bottom: 20px;
    }
    .mt {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .minus {
      padding: 5px 10px;
      background: #f7f8f7;
      cursor: pointer;
    }
    .add {
      padding: 5px 10px;
      background: #f7f8f7;
      cursor: pointer;
    }
    .num {
      // padding: 2px 10px;
      background: #f7f8f7;
      margin: 0 5px;
      width: 40px;
      height: 30px;
      text-align: center;
    }
    input:focus {
      border: none;
      outline: none;
    }
  }

  .primary-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
  //分页
  .payment_index_bottom_page {
    width: 1210px;
    height: 40px;
    margin: 10px auto 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &_left {
      height: 40px;
      display: flex;
      align-items: center;
      color: #000;
      font-size: 14px;
    }

    &_right {
      .el-pagination {
        font-weight: 400;
      }
    }
  }
}
</style>